import Component from './component.vue'
import { createApp, h, reactive } from 'vue'
let instance = null
let container = null
let component = null

const propsState = reactive({
  resolve: null,
  reject: null,
})
const init = () => {
  if (instance) return
  container = document.createElement('div', { id: 'selRole' })
  container.setAttribute('id', 'selRole')
  document.body.appendChild(container)
  instance = createApp({
    render() {
      return h(Component, {
        ref: (el) => {
          component = el
        },
        ...propsState,
      })
    },
  })
  instance.mount(container)
}

export const selectRole = () => {
  init()
  return new Promise((resolve, reject) => {
    propsState.resolve = resolve
    propsState.reject = reject
    component.show()
  })
}
